<mat-select *ngIf="!mode" [ngModel]="localModel" (ngModelChange)="modelChanged($event)" ngDefaultControl>
    <ng-container *ngFor="let chargroup of specificChar">
        <span title="{{chargroup.groupName}}" class="groupName">{{chargroup.groupName}}</span>
        <mat-option title="{{ char.title }} ({{char.value}})" *ngFor="let char of chargroup.groupValues" value="{{char.value}}">{{ char.title }}</mat-option>
    </ng-container>
</mat-select>
<div *ngIf="mode && mode === 'configurator'"  class="widghet_content" (keydown)="keyDown($event)">
    <div class="close" (click)="close()"><span class="glyphicon glyphicon-remove"></span></div>
    <input class="dictionary_widget_search" [(ngModel)]="filter" i18n-placeholder="@@placeholder.specific-char-picker.__search" placeholder="  Search..">
    <div class="char_widget" >
        <div class="list">
            <div *ngFor="let chargroup of specificChar|search:filter" >
                <span title="{{chargroup.groupName}}" class="groupName">{{chargroup.groupName}}</span>
                <div class="list_element" title="{{ char.title }} ({{char.value}})" *ngFor="let char of chargroup.groupValues|search:filter" (click)="addSelectedElement(char.value)">{{ char.title }}</div>
            </div>
        </div>
    </div>
</div>
